<template>
  <div>
    <BasicTable
      title=""
      :columns="columns"
      :dataSource="data"
      :loading="loading"
      striped
      bordered
      showTableSetting
      :pagination="pagination"
      :resizeHeightOffset="33"
      rowKey="id"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'warnStr'">
          <span style="color: red">
            {{ record.warnStr }}
          </span>
        </template>
        <template v-if="column.key === 'channel'">
          <span class="">
            <a>{{ sensorMap[record.sensorId].channel }}</a>
          </span>
        </template>
        <template v-if="column.key === 'createDate'">
          <span class="">
            <a>{{ record.createDate.replace('T', ' ') }}</a>
          </span>
        </template>
        <template v-if="column.key === 'action'">
          <span class="">
            <a @click="showConfirm(record.id)">处理</a>
            <a class="ml-4" @click="showDetails(record)">详细</a>
          </span>
        </template>
      </template>
      <template #toolbar>
        <a-button type="primary" ghost @click="showConfirm2"> 批量处理 </a-button>
        <a-button type="primary" ghost> 批量导出 </a-button>
      </template>
    </BasicTable>
    <details-modal ref="detailsM" />
  </div>
</template>

  <script lang="ts">
import { defineComponent, createVNode, ref, reactive, toRefs } from 'vue';
import { BasicTable } from '/@/components/Table';
import { getCols } from './tableData';
import { Modal } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { defHttp } from '/@/utils/http/axios';
import detailsModal from './details-modal.vue';

export default defineComponent({
  components: { BasicTable, detailsModal },
  setup() {
    const state = reactive<{
      selectedRowKeys: Key[];
      loading: boolean;
    }>({
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    });

    const onSelectChange = (selectedRowKeys: Key[]) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };

    // const loading = ref(false);
    const pagination = ref<any>(true);
    const sensorMap = ref({});
    const projectMap = ref({});
    const data = ref([]);
    const detailsM = ref();
    const showConfirm = (id) => {
      popWith('处理选中警告，是否继续？', () => {
        changeStatus([id]);
      });
    };

    const showConfirm2 = () => {
      popWith('批量处理选中警告，是否继续？', () => {
        let list = state.selectedRowKeys;
        if (list.length === 0) {
          return message.info('请先选择数据');
        }
        changeStatus(list);
      });
    };

    function changeStatus(arr) {
      defHttp.post({ url: '/Warn/change-status', params: arr }).then((res) => {
        message.success('处理成功');
      });
    }

    const setData = (data1: any, page: any) => {
      data.value = data1;
      pagination.value = page;
    };

    const setSensorMap = (sensors: any) => {
      let map = {};
      sensors.forEach((item) => {
        map[item.id] = item;
      });
      sensorMap.value = map;
    };

    const setProjects = (projects: any) => {
      let map = {};
      projects.forEach((item) => {
        map[item.id + ''] = item;
      });
      projectMap.value = map;
    };
    function popWith(msg, cb) {
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode('div', { style: 'color:black;' }, msg),
        class: 'test',
        onOk() {
          cb();
        },
      });
    }

    function showDetails(row) {
      console.log(row, 11111111);
      detailsM.value.open(row);
    }

    return {
      columns: getCols(),
      data,
      setData,
      sensorMap,
      projectMap,
      setProjects,
      setSensorMap,
      // loading,
      pagination,
      showConfirm,
      showConfirm2,
      onSelectChange,
      ...toRefs(state),
      showDetails,
      detailsM,
    };
  },
});
</script>
